<template>
  <div id="suppliers" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1">系统管理</li>
        <li class="breadcrumb-item" aria-current="page">
          <router-link to="/h5/suppliers">供应商</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
          <template v-if="id === 0"> 新建 </template>
          <template v-else> 修改 </template>
        </li>
      </ol>
    </nav>
    <div class="card-body">
      <form>
        <div class="row mb-2">
          <label class="control-label col-4 text-end"> 名称* </label>
          <div class="col-8">
            <input type="text" class="form-control" v-model="name" />
            <span class="text-muted small"></span>
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-4 text-end"> 拼音 </label>
          <div class="col-8">
            <input type="text" class="form-control" v-model="pinyin" />
            <span class="text-muted small">用于排序</span>
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-4 text-end"> 类型 </label>
          <div class="col-8">
            <select class="form-select" v-model.number="supplierType">
              <option value="0">综合</option>
              <option value="1">机票</option>
              <option value="2">保险</option>
              <option value="3">酒店</option>
              <option value="4">旅游</option>
              <option value="5">火车票</option>
              <option value="6">租车</option>
            </select>
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-4 text-end"> 备注 </label>
          <div class="col-8">
            <input type="text" class="form-control" v-model="remark" />
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-4 text-end"> 支付方式 </label>
          <div class="col-8">
            <select class="form-select" v-model.number="paymentMethodId">
              <option value="0">无</option>
              <template v-for="info in pmList">
                <option
                  :key="info.id"
                  :value="info.id"
                  v-if="info.status === 1"
                >
                  {{ info.name }}
                </option>
              </template>
            </select>
            <span class="text-muted small">默认的支付方式</span>
          </div>
        </div>
        <div class="row mb-2">
          <label class="control-label col-4 text-end"> 状态 </label>
          <div class="col-8">
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="status"
              />
              <label class="form-check-label text-danger">停用</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="status"
              />
              <label class="form-check-label text-success">启用</label>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      
      <button
        type="button"
        class="btn btn-primary"
        @click.stop="saveSupplier()"
      >
        保存
      </button>
      <button type="button" class="btn btn-secondary" @click.stop="back()">
        取消
      </button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import MyPagination from "@/components/my-pagination_h5.vue";
import $ from "jquery";
import {
  searchSupplier,
  saveSupplier,
  searchPaymentMethods,
} from "@/api/basic-data.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },

      id: 0,
      name: "",
      supplierType: 0,
      remark: "",
      pinyin: "",
      paymentMethodId: 0,
      status: 1,

      pmList: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    let id = parseInt(this.$route.query.id);
    if (isNaN(id) === false && id > 0) {
      this.id = id;
      this.searchDetail();
    } else {
      this.newSupplier();
    }
    this.searchPaymentMethods();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showDetail: function (id) {
      this.$router.replace("/h5/supplier/" + id);
    },
    searchPaymentMethods: function () {
      searchPaymentMethods(
        {
          "sc.pageNo": 1,
          "sc.pageSize": 1000,
        },
        (v) => {
          this.pmList = v.dataList;
        }
      );
    },
    newSupplier: function () {
      this.id = 0;
      this.name = "";
      this.supplierType = 0;
      this.remark = "";
      this.pinyin = "";
      this.paymentMethodId = 0;
      this.status = 1;
    },
    saveSupplier: function () {
      const params = {
        id: this.id,
        name: this.name,
        supplierType: this.supplierType,
        remark: this.remark,
        pinyin: this.pinyin,
        paymentMethodId: this.paymentMethodId,
        status: this.status,
      };
      saveSupplier(params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("操作成功");
          this.showDetail(v.returnCode);
        } else {
          this.showErrMsg("失败：" + v.errmsg);
        }
      });
    },
    searchDetail: function () {
      searchSupplier(this.id, (v) => {
        this.id = v.id;
        this.name = v.name;
        this.supplierType = v.supplierType;
        this.remark = v.remark;
        this.pinyin = v.pinyin;
        this.paymentMethodId = v.paymentMethodId;
        this.status = v.status;
      });
    },
  },
};
</script>
